<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>购物车</title>
		<link rel="stylesheet" href="http://www.xyshopping.com:8848/qianduan/resources/css/bootstrap.min.css" type="text/css" />
		<script src="http://www.xyshopping.com:8848/qianduan/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="http://www.xyshopping.com:8848/qianduan/resources/js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://www.xyshopping.com:8848/qianduan/resources/js/jquery-heima-0.0.1.js"></script>
		<script type="text/javascript" src="http://www.xyshopping.com:8848/qianduan/resources/js/heima-include.js"></script>
		<script>
			$(function(){
				//添加购物项
				//注意，三个参数都要写上。
				HM.ajax("/cart?md=list","",function(vo){
					var cart = vo.data;
					var total = cart.total;
					$("#total").html(total);
					var items = cart.items;
					for(item of items){
						var tr="<tr class=\"active\">\n" +
								"\t\t\t\t\t\t\t\t\t<td width=\"60\" width=\"40%\">\n" +
								"\t\t\t\t\t\t\t\t\t\t<img src=\"http://www.xyshopping.com:8848/qianduan/"+item.product.pimage+"\" width=\"70\" height=\"60\">\n" +
								"\t\t\t\t\t\t\t\t\t</td>\n" +
								"\t\t\t\t\t\t\t\t\t<td width=\"30%\">\n" +
								"\t\t\t\t\t\t\t\t\t\t<a target=\"_blank\"> "+item.product.pname+"a>\n" +
								"\t\t\t\t\t\t\t\t\t</td>\n" +
								"\t\t\t\t\t\t\t\t\t<td width=\"20%\">\n" +
								"\t\t\t\t\t\t\t\t\t\t￥"+item.product.shop_price+"\n" +
								"\t\t\t\t\t\t\t\t\t</td>\n" +
								"\t\t\t\t\t\t\t\t\t<td width=\"10%\">\n" +
								"\t\t\t\t\t\t\t\t\t\t"+item.count+"\n" +
								"\t\t\t\t\t\t\t\t\t</td>\n" +
								"\t\t\t\t\t\t\t\t\t<td width=\"15%\">\n" +
								"\t\t\t\t\t\t\t\t\t\t<span class=\"subtotal\">￥"+item.subtotal+"</span>\n" +
								"\t\t\t\t\t\t\t\t\t</td>\n" +
								"\t\t\t\t\t\t\t\t\t<td>\n" +
								"\t\t\t\t\t\t\t\t\t\t<a pid='"+item.product.pid+"'href=\"javascript:;\" class=\"delete\" onclick='delItem(this)'>删除</a>\n" +
								"\t\t\t\t\t\t\t\t\t</td>\n" +
								"\t\t\t\t\t\t\t\t</tr>"
								
						$("#item_list").append(tr);
					}
				})
				
				//清空购物车
				$("#clear").click(function(){
					if(confirm("亲，您确定要清空购物车吗？")){
						HM.ajax("/cart?md=clear","",function(){
							location.reload();
						})
					}
				})
				
				//生成订单
				$("#generateOrderBtn").click(function(){
					HM.ajax("/order?md=generate","",function(vo){
						if(vo.code == 2){
							//没有登录，跳转到登录页面
							//跳转到登录页面 加个参数， 代表登录后我想跳转的页面，想跳转的页面就是登录前的页面。
							location.href="../../login.html?ret="+location.href;
						}
						if(vo.code == 0){
							//购物车是空的
							alert(vo.data);
						}
						//提交订单，跳转到订单详情页面，携带oid
						if(vo.code == 1){
							location.href="../order/info.html?oid="+vo.data;
						}
					})
				})
				
				
				
				
				
				
				
				
				
			})
			function delItem(obj){
				if(confirm("亲，您确认要删除该商品吗？")){
					//获取pid
					var pid = $(obj).attr("pid");
					HM.ajax("/cart?md=delItem","pid="+pid,function(vo){
						//重载页面
						location.reload();
					})
				}else{
					//什么也不做
				}
			}
		</script>
	</head>

	<body>
		<div class="container-fluid">
			<!--头部-->
			<div id="header" style="min-height: 130px;"></div>
			<div class="container" style="min-height: 441px;">
				<div class="row">
					<div style="margin:0 auto; margin-top:10px;width:950px;">
						<strong style="font-size:16px;margin:5px 0;">购物车详情</strong>
						<table class="table table-bordered">
							<thead>
								<tr class="warning">
									<th>图片</th>
									<th>商品</th>
									<th>价格</th>
									<th>数量</th>
									<th>小计</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="item_list">

							</tbody>
						</table>
					</div>
				</div>

				<div style="margin-right:130px;">
					<div style="text-align:right;">
						商品金额: <strong style="color:#ff6600;">￥<span id="total">0.00</span>元</strong>
					</div>
					<div style="text-align:right;margin-top:10px;margin-bottom:10px;">
						<a href="javascript:;" id="clear" class="clear">清空购物车</a>
						<a href="javascript:;" id="generateOrderBtn">
							<input type="button" width="100" value="提交订单" border="0" style="background-color:#CD062D;height:35px;width:100px;color:white;">
						</a>
					</div>
				</div>
			</div>
			<!--尾部-->
			<div id="footer" style="min-height: 203px;"></div>
		</div>
	</body>
</html>
